<template>
  <div class="home">
    <!-- 分类区域 -->
    <van-tabs color="#000">
      <van-tab v-for="category in categorys" :key="category.id" :title="category.name">
      </van-tab>
    </van-tabs>
    <!-- 轮播图区域 -->
    <van-swipe :autoplay="3000" class="swipe">
      <van-swipe-item v-for="banner in banners" :key="banner.id">
        <img v-lazy="banner.imageUrl" />
      </van-swipe-item>
    </van-swipe>
    <!-- 更新加载数据 -->
    <van-list
      v-model="loading"
      offset='0'
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-card
        v-for="product in products"
        :key="product.id"
        :title="product.title"
        :thumb="product.image"
        @click-thumb="goDetail(product.id)"
      >
        <template #desc>
          <div class="card-desc">{{product.rankingtag}}</div>
        </template>
        <template #tags>
          <div>
            全天热卖 NO.{{product.dataoke.dailyRanking}}
          </div>
          <div>
            <span>￥{{product.price | money}}</span>
            <span>原价：{{product.originPrice | money}}</span>
          </div>
        </template>
        <template #price>
          <van-tag v-if="product.couponValue" plain type="primary" color="#f00">{{product.couponValue}}</van-tag>
        </template>
        <template #num>
          <div>
            {{product.dataoke.monthSales | saleNum}}
            <button @click="add(product)">加入购物车</button>
          </div>
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
import { getBanners, getBaokuan } from '@/api/home'
import { getCategory } from '@/api/category'
export default {
  name: 'Home',
  data() {
    return {
      banners: [], // 轮播图数据
      categorys: [], // 分类数据
      products: [], // 爆款商品数据
      nextIndex: 0, // 列表数据加载时的起始索引
      loading: false, // 当前是否正在加载列表数据
      finished: false, // 所有列表数据是否加载完毕
    }
  },
  created() {
  //   request({
  //     url: 'http://rap2api.taobao.org/app/mock/284783/api/banners',
  //   })
  //     .then(data => {
  //       this.banners = data.banners
  //     })
  //     .catch(err => console.log('异常:', err))
  // },
    // 请求轮播图数据
    getBanners()
      .then(data => {
        this.banners = data.banners
      })
      .catch(err => console.log('异常', err))

    // 请求分类数据
    getCategory()
      .then(res => {
        this.categorys = res.list
      })
      .catch(err => console.log('异常', err))
  },
  // 局部过滤器
  filters: {
    saleNum(val) { // 格式化数据
      // 判断如果购买人数超过一万就自动格式化数据
      if (val >= 10000) {
        val = (val / 10000).toFixed(1) + '万'
      }
      // 如果没有超过一万就直接返回
      return `月销量${val}`
    },
    money(val) {
      // 如果价格后面小数点有多位就只取两位
      val = Number(val).toFixed(2)
      return val
    },
  },
  methods: {
    onLoad() {
      // 加载爆款商品数据
      getBaokuan(this.nextIndex)
        .then(data => {
          // 更新数据
          this.products.push(...data.list)
          this.nextIndex = data.nextIndex

          // 更新列表中使用的变量
          this.loading = false
          this.finished = data.isEnd
        })
        .catch(err => console.log('异常：', err))
    },
    goDetail(id) {
      this.$router.push(`/detail?id=${id}`)
    },
    // 加入购物车
    add(product) {
    // 解构赋值商品参数
      const { id, title, image, price, qunTitle } = product
      // 当前选购商品
      const curr = {
        id,
        title,
        image,
        price,
        desc: qunTitle,
        amount: 1,
      }
      // 通过 VueX 来保存数据
      // 通过提交 mutation 来保存
      this.$store.commit('add', curr)
    },

  },

}
</script>

<style lang='less'>
body{
  width: 100%;
  height: 100%;
  position: relative;
}
.swipe {
  img{
    width: 100%;
  }
}
button{
  background-color: red;
  border: none;
  outline: none;
  color: #fff;
}

</style>
